<template>
    <div>
        <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词" v-if="vif">
                <el-input v-model="formInline.keywords" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="时间范围" v-show="vshow">
                <el-date-picker v-model="formInline.startTime" type="date" placeholder="选择日期">
                </el-date-picker>
                -
                <el-date-picker v-model="formInline.endTime" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="vif = !vif">VIF</el-button>
                <el-button type="primary" @click="vshow = !vshow">vshow</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="roleId" label="角色ID">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="createName" label="创建人">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handlePermission(scope.$index, scope.row)">权限分配
                    </el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :page-size="page.pageSize" :total="page.totalCount"
            @current-change="handleCurrentChange" class="page">
        </el-pagination>
        <el-dialog title="添加角色" :visible.sync="dialogFormVisiblePermission">
            <assign-permission ref="assignpermission"></assign-permission>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblePermission = false">取 消</el-button>
                <el-button type="primary" @click="Save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { Query, AssignPermissions, Test } from '@/api/role';
    import moment from 'moment'
    import AssignPermission from './AssignPermission';
    export default {
        //name: 'RbacProjectUiList',
        components: {
            AssignPermission
        },
        data() {
            return {
                vif: true,
                vshow: true,
                tableData: [],
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    totalCount: 0
                },
                formInline: {
                    keywords: '',
                    startTime: '',
                    endTime: ''
                },
                currentRoleId: 0,
                rowData: {},
                dialogFormVisiblePermission: false,
                dialogFormVisibleEdit: false
            };
        },

        mounted() {
            this.LoadData();
        },

        methods: {
            LoadData() {
                Query(Object.assign({}, this.page, this.formInline)).then(m => {
                    this.tableData = m.data.item2;
                    this.page.totalCount = m.data.item1;
                });
            },
            handlePermission(index, row) {
                this.dialogFormVisiblePermission = true;
                this.currentRoleId = row.roleId;
            },
            Save() {
                var checkedNodes = this.$refs.assignpermission.$refs.menuNode.getCheckedKeys();
                let _this = this;
                AssignPermissions({ roleId: this.currentRoleId, permissionIds: checkedNodes }).then(m => {
                    this.$message({
                        message: '权限分配成功',
                        type: 'success',
                        onClose: function () {
                            _this.dialogFormVisiblePermission = false;
                        }
                    });
                });
            },
            SaveSuccess() {
                // this.LoadData();
                // this.dialogFormVisiblePermission = false;
            },
            formatter(row, column, cellValue, index) {
                return moment(cellValue).format("YYYY-MM-DD kk:mm:SS")
            },
            handleCurrentChange(val) {
                this.page.pageIndex = val;
                this.LoadData();
            },
            /**
             * @description: 查询                           
             * @return {*}
             */
            onSubmit() {
                Test({ Arr: [3, 4, 5] }).then(m => {

                });
            }
        },
    };
</script>

<style>
    .page {
        display: table;
        margin: 0 auto;
        margin-top: 20px;
    }
</style>